<template>
  <div class="layout_dash">
    <el-row class="top">
      <el-col :span="12" class="weather">
        <el-row> <el-col :span="18"><span>{{ weather.createDate }}</span> <span>星期三</span></el-col>
        <el-col :span="6" align="right"><el-button>查看更多</el-button></el-col></el-row>
       
        <el-row class="wen">
          <el-col :span=6 align="center"><span>16摄氏度</span><span>阴转多云</span></el-col>
          <el-col :span=6 align="center"><span>温度</span><span>19</span></el-col>
          <el-col :span=6 align="center"> <span>降雨</span><span>0mm</span></el-col>
          <el-col :span=6 align="center"><span>积温</span><span>23℃</span></el-col>
        </el-row>
        <el-row class="wen" >
          <el-col :span=6 align="center"><span></span></el-col>
          <el-col :span=6 align="center"><span>温度</span><span>19</span></el-col>
          <el-col :span=6 align="center"> <span>降雨</span><span>0mm</span></el-col>
          <el-col :span=6 align="center"><span>积温</span><span>23℃</span></el-col>
        </el-row>
      </el-col>
      <el-col :span="12">12312</el-col>
    </el-row>
    <el-row class="watch">
      <el-row><el-col :span=20>数据总览</el-col><el-col :span=4><el-button-group>
  <el-button @click="select=0" :type="select==0?'primary':'default'" >本月</el-button>
  <el-button @click="select=1" :type="select==1?'primary':'default'" >本季</el-button>
  <el-button @click="select=2" :type="select==2?'primary':'default'">本年</el-button>
</el-button-group></el-col></el-row>
      <Time :select="select"></Time>
      </el-row>
    <el-row class="top">
      <el-col :span="12" class="echarts">
        <div style="width:100%;height:100%" ref="echarts"></div>
      </el-col>
      <el-col :span="12"> 
        <el-row>数据</el-row>
        <Pie></Pie>
      </el-col>
    </el-row>
  </div>
</template>
<script>
    
</script>
<style scoped>
.watch{
  width:100%;
  height: 120px;
  border:4px solid #1d90ab;
}
span{
  margin-left: 10px;
  line-height: 30px;
}
.wen{
  height: 120px;
  line-height: 120px;
}
.wen .el-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* text-align: center; */
  justify-content: center;
  border-right: 1px solid #1d90ab;
}
.weather{
  height: 80px;
  line-height: 80px;
}
.layout_dash {
  width: 100%;
  height: 100%;
  background: #132e3f;
  overflow: hidden;
  overflow-y: scroll;
  color: #fff;
}
.top {
  width: 100%;
  height: 50%;
}
.top > .el-col {
  height: 100%;
  border: 4px solid #1d90ab;
}
</style>
